<template>
  <div id="barEchars" ref="echarsRef" :style="{ height, width }"></div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import { ref, onMounted, defineProps } from "vue";

defineProps({
  className: {
    type: String,
    default: "",
  },
  width: {
    type: String,
    default: "200px",
    required: true,
  },
  height: {
    type: String,
    default: "200px",
    required: true,
  },
});

const echarsRef = ref<HTMLDivElement>();
// 数据
var xData = ["张三", "李四", "王五", "闰土", "小明", "茅台", "二妞", "大强"];
var yData1 = [88, 92, 63, 77, 94, 80, 72, 86];
var yData2 = [45, 66, 90, 78, 87, 54, 77, 100];
// 配置
const option = {
  // 标题
  // title: {
  //   text: "成绩",
  //   // 标题文本样式
  //   textStyle: {},
  // },
  // 区域缩放配置
  // 缩放类型, slider: 滑动条型;  inside: 内置在坐标系中,通过鼠标拖拽和滚轮来缩放
  dataZoom: [
    {
      type: "slider",
      // 指定缩放哪个轴缩放
      xAxisIndex: 0,
    },
    // {
    //   type: "slider",
    //   yAxisIndex: 0,
    //   // 指明缩放初识百分比
    //   start: 0,
    //   // 指明缩放结束百分比
    //   end: 90,
    // },
  ],
  // 直角坐标系网络配置
  grid: {
    // 是否显示网格
    show: false,
    // 网格边框宽度
    borderWidth: 5,
    // 网格边框颜色
    borderColor: "green",
  },
  // 鼠标移动到柱状图内部时的提示框
  tooltip: {
    // 触发类型item: 进入item就显示, axis: 在数值轴上也可以显示
    trigger: "axis",
    // 提示框触发时机: mousemove: 鼠标移动时触发, click: 鼠标点击时触发
    triggerOn: "mousemove",
    // 指示器
    axisPointer: {
      type: "shadow",
    },
  },
  // 工具栏
  toolbox: {
    show: false,
    feature: {
      // 导出成图片
      saveAsImage: {},
      // 显示数据源,数据视图
      dataView: {},
      // 重置数据
      restore: {},
      // 区域缩放
      dataZoom: {},
      // 图表类型动态切换
      magicType: {
        type: ["bar", "line", "stack"],
      },
    },
  },
  // 数据分类切换
  legend: {
    data: ["语文", "数学"],
  },

  // x轴
  xAxis: {
    data: xData,
  },
  // y轴
  yAxis: {},
  series: [
    {
      name: "语文",
      type: "bar",
      data: yData1,
      markPoint: {
        data: [
          {
            type: "max",
            name: "最大值",
          },
          {
            type: "min",
            name: "最小值",
          },
        ],
      },
      markLine: {
        data: [
          {
            name: "及格线",
            yAxis: 60,
          },
          {
            type: "average",
            name: "平均值",
          },
        ],
      },
      label: {
        // 柱状图数值的显示
        show: true,
        // 柱状图数值的旋转70显示
        rotate: 70,
        // 柱状图数值的显示位置.
        position: "inside",
      },
      // 柱状图的宽度
      barWidth: "30%",
    },
    {
      name: "数学",
      type: "bar",
      data: yData2,
      barWidth: "30%",
      label: {
        show: true,
        rotate: 70,
        position: "inside",
      },
      markPoint: {
        data: [
          {
            type: "max",
            name: "最大值",
          },
          {
            type: "min",
            name: "最小值",
          },
        ],
      },
    },
  ],
};

/**
 *  初始化Echarts
 */
const initEcharts = () => {
  const myEchars = echarts.init(echarsRef.value);
  myEchars.setOption(option);
  window.addEventListener("resize", () => {
    myEchars.resize();
  });
};

onMounted(() => {
  initEcharts();
});
</script>

<style lang="scss" scoped></style>
